﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Thesaurus Tooltip jQuery Plugin</title>
    <meta name="description" content="This toolkit is the simplest way to create own in-text advertising system using IntelliTXT (IntelliImages/IntelliMedia) technology approach" />
    <meta name="keywords" content="ad, advertising, dictionary, glossary, IntelliTXT, tooltip, RIA" />

    <link rel="icon" href="./favicon.ico" type="image/ico" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="./js/jquery.thesaurus.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    <style type="text/css">
    
    body {
        background-color: #DDDDDD;
        color: #222222;
        font-family: MuseoSlab,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 0;
        line-height: 150%;
    }

    a, a:visited {
        color: black;
    }

    body > section {
        background-color: #FFFFFF;
        -webkit-box-shadow: 4px 0 10px #CCCCCC, -4px 0 10px #CCCCCC, 0 38px 36px -24px #AAAAAA;
         -moz-box-shadow: 4px 0 10px #CCCCCC, -4px 0 10px #CCCCCC, 0 38px 36px -24px #AAAAAA;
          -o-box-shadow: 4px 0 10px #CCCCCC, -4px 0 10px #CCCCCC, 0 38px 36px -24px #AAAAAA;
           box-shadow: 4px 0 10px #CCCCCC, -4px 0 10px #CCCCCC, 0 38px 36px -24px #AAAAAA;
        margin: 0 auto;
        max-width: 750px;
        padding: 20px 40px 40px 40px;
    }

    section > header {
        background-color: #3C5F87;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -khtml-border-radius:5px;
        padding: 20px 20px;
        margin-top: 0px;
    }
    header h1 {
        text-shadow: 2px 2px 2px #333333;
        font-size: 32px;
        line-height: 120%;
        margin: 0;
        color: white;
    }
    header h2 {
        text-shadow: 2px 2px 2px #333333;
        font-size: 18px;
        margin: 3px;
        color: white;
        line-height: 140%;
    }
    article {
        padding: 14px 0;
    }
    dl {
        padding: 0;
    }
    dt {
        font-weight: bold;
        display: inline-block;
        width: 100px;
        vertical-align: top;
    }
    dd {
        display: inline-block;
        vertical-align: top;
        width: 600px;
    }
    a.button {
            display: block;
            position: relative;
            border:1px solid #bbb;
            -moz-border-radius:3px;
            -webkit-border-radius:3px;
            border-radius:3px;
            -khtml-border-radius:3px;
            background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#d5d5d5));
            background: -webkit-linear-gradient(#eee, #d5d5d5);
            background: -o-linear-gradient(#eee, #d5d5d5);
            color:#232d3d;
            font-size: 20px;
            font-weight:bold;
            padding:4px 10px;
            margin: 30px auto;
            text-shadow:0px 1px 0px #fff;
            cursor:pointer;
            box-shadow:0px 1px 2px #ccc;
            -moz-box-shadow:0px 1px 2px #ccc;
            -webkit-box-shadow:0px 1px 2px #ccc;
            text-align: center;
            font-size: 14px;
            text-decoration: none;
            max-width: 500px;
    }
    textarea.code {
            border: 0;
            background-color: #EEE;
            background-image: none;
            color: #222222;
            font: 14px Arial;
            display: inline;
            width: 100%;
            height: auto;
            padding: 10px;
    }
    var {
        font-weight: bold;
    }
    </style>
</head>
<body>
<section>
        <header>
            <hgroup>
                <h1>Thesaurus Tooltip jQuery Plugin</h1>
                <h2>This toolkit is the simplest way to create own in-text advertising system
            using IntelliTXT (IntelliImages/IntelliMedia) technology approach.</h2>
            </hgroup>
        </header>
        <article>
       
            <p>You can apply the plugin for content areas on your site pages and it will highlight all the terms from the dictionary (by default: sample.csv). When hovering a term, visitors of your site will get definition of the term on a tooltip. Content of the appeared tooltip is being processed as well. So if any terms are encountered , they get definition-tooltips attached. If you switch to DB data-source, you will have visits and click statistics collected.  </p>
            <p>You can use this plugin to create intelligent advertisement, tooltip to show portal news description, interactive reference book and so on and so forth. </p>

            <h2>Features of Thesaurus 4.0</h2>
                <ul>                    
                    <li>Support of Unicode for terms and descriptions (проверка).</li>
                    <li>Retrieving data though Cross-Domain Request. That allows you to have the same controller for
                    instaces of Thesaurus on different domains. </li>
                    <li>Nesting of tooltips. When the term occures within the tooltip text it will cause
                    another tooltip when hovering by mouse.</li>
                    <li>Manual effects, based on CSS3 transition can be easily applied.</li>
                    <li>Optional: Toolbar view and click (within toolbar overlay) statistics are collected and pushed to the server with specified time intervals in a queue.</li>
                </ul>
            
            <h2>Usage and API</h2>
            <h3>Step 1</h3>
            <p>Unpack the package into a folder on your server. Include the plugin script after jQuery (requires jQuery 1.4+):</p>
             <div>
                <textarea rows="1" class="code">
<script src="./js/jquery.thesaurus.js" type="text/javascript"></script>
                </textarea>
            </div>
            <h3>Step 2</h3>
            <p>Now let's apply the plugin on a set of elements when document is ready. 
                Here any article elements on the page will be parsed for thesaurus terms:</p>
             <div>
                <textarea rows="11" class="code">
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('article').Thesaurus({
        effect: 'fade',
        caseSensitive: false 
    });
});
    // -->
</script>
                </textarea>
            </div>
            
            <h3>Available Options</h3>
            
            <dl>
                <dt>caseSensitive</dt>
                <dd>defines if the plugin does case sensitive search for the terms</dd>
                
                <dt>effect</dt>
                <dd>transition effect for tooltip: <var>fade</var> or any manual
                </dd>
                
                <dt>pushStats</dt>
                <dd>states if the plugins collects tooltip click and view statistics into queue 
                    and uploads the queue to the server every 5 sec (if it is not empty).</dd>                
                
            </dl>
            
            <h3>Back-end configuration</h3>
            
            
            <p>In ./app/Config/config.php you will find a CSV file is set up as data source. 
                If you want to use DB, just uncomments another configuration section.</p>
            
            <h3>Manual transition effects making</h3>
            
            
            <p>You can make your own effect for Thesaurus using CSS3. 
                Just describe the initial state of tooltip overlay and final state. 
                Name those CSS classes by the pattern thesaurus-EFFECTNAME-start and thesaurus-EFFECTNAME-end:</p>
            
            <div>
                <textarea rows="12" class="code">
.thesaurus-scale-start {
    opacity: 0; 
    -moz-transform: scale(0.1);
}    
.thesaurus-scale-end {
    -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out; 
    opacity: 1 !important;
    -moz-transform: scale(1);
}
                </textarea>
            </div>
            <p>Now you can just specify the effect (EFFECTNAME) in the plugin options.</p>

            <h2>References:</h2>
            <ul>
                <li>Source code is available to download at <a href="http://code.google.com/p/jquery-thesaurus/downloads/list">Google Code</a></li>
                <li>Project page and SVN <a href="http://code.google.com/p/jquery-thesaurus/">Google Code</a></li>
                <li>Live demo <a href="http://demo.dsheiko.com/thesaurus/">demo.dsheiko.com</a></li>
                <li>My other owork can be found <a href="http://dsheiko.com/freeware">here</a></li>
            </ul>

            <h2>Live Demo</h2>
            
            <p><strong>Acquisition</strong></p>
            <ul type="square">
                <li>Digital Asset Management, including built-in file browser with broad features of file classification, ability of file compositions creation</li>
                <li>Document and file access permission management </li>
                <li>CSV format supporting within data import</li>
                <li>Data import and export by means of SOAP </li>
            </ul>
            <p></p>
            <p><strong>Aggregation </strong></p>
            <ul type="square">
                <li>Data syndication formats supporting</li>
                <li>Meta-data analysis for incoming data</li>
                <li>Integrated web-services</li>
            </ul>
            <p></p>
            <p><strong>Web-integration</strong></p>
            <ul type="square">
                <li>Ability of platform management interface creation onto external environments (API Site Sapiens 3.0 SOAP Server)</li>
                <li>Ability of data synchronization between the Site Sapiens-based project repository and external heterogeneous networks. </li>
                <li>Ability of data collection from external systems. </li>
            </ul>
            <p></p>
            <p><strong>Authoring </strong></p>
            <ul type="square">
                <li>Management of information space structure by means of unified dynamic tree with branches, that can be downloaded by request on-the-fly. </li>
                <li>Record repository management by means of grids</li>
                <li>XML Sapiens 2.0 XML-based markup system, which allows flexible logical constructions. </li>
                <li>Context-depended help</li>
                <li>Unlimited nesting of record repository </li>
                <li>Generation of content management interfaces on the basis of specified XML scheme.</li></ul>
            <p></p>
            <p><strong>Content organizing</strong> </p>
            <ul type="square">
                <li>Ability of content object classification (records, documents) within specified aspects in accordance with principles: one to many, many to many </li></ul>
            <p></p>
            <p><strong>Versioning </strong></p>
            <ul type="square">
                <li>Author documents/records version management </li>
            </ul>
            <p></p>
            <p><strong>Personalization </strong></p>
            <ul type="square">
                <li>Setting of interface appearance (tree, grid, browsers), data selecting/filtering conditions. Restoring of user settings when he is turning to certain interface. </li>
                <li>Actions tracking</li>
            </ul>
            <p></p>
            <p><strong>Localization</strong></p>
            <ul type="square">
                <li>Multilingual GUI</li>
                <li>UTF-8 system char set as standard</li>
            </ul>
            <p></p>
            <p><strong>Reporting </strong></p>
            <ul type="square">
                <li>Ability of any system events tracking, monitors creation, assignation of reporting direction (server, email-addresses) </li></ul>
            <p></p>
            <p><strong>Security</strong></p>
            <ul type="square">
                <li>Encrypted sessions</li>
                <li>Object (document, records, files) access permission management</li>
            </ul>
            <p></p>
            <p><strong>Staging Server for QA</strong></p>
            <ul type="square">
                <li>Unit-test of all general system API </li>
            </ul>
            <p></p>
            <p><strong>Content Delivery</strong></p>
            <ul type="square">
                <li>Publishing </li>
                <ul type=circle>
                    <li>Separate Delivery </li>
                    <ul type="square">
                        <li>Replication </li>
                        <li>Synchronization of mirror sites</li>
                    </ul>
                </ul>
            </ul>
            <p></p>
            <ul type="square">
                <li>Multi-Publishing to different clients </li>
                <ul type=circle>
                    <li>PDA</li>
                    <li>Cell phones</li>
                </ul>
                <li>Syndication</li>
                <ul type=circle>
                    <li>RDF Syndicated News Feeds </li>
                    <li>Web-services</li>
                </ul>
            </ul>
        </article>
        <footer>
            <p><a class="button" href="http://code.google.com/p/jquery-thesaurus/downloads/list">Download the latest version</a></p>
            <p><var>Thesaurus</var> is created by <a href="http://dsheiko.com">Dmitry Sheiko</a>.
                It's released under the GPLv2 license. If you have any questions or feedback you can use the <a href="http://code.google.com/p/jquery-thesaurus/">project page.</a></p>

        </footer>
    </section>
    <script type="text/javascript">
    <!--
    $(document).ready(function(){
        $('article').Thesaurus({
            pushStats: false,
            effect: 'fade',
            caseSensitive: false // Used when matching found terms against loaded ones
        });
    });
     // -->
    </script>
</body>
</html>